<template>
    <div  class="wrapper-fixed">
        <div class="action-bar-wrapper">
            <el-col :span="24" class="action-bar">
            <el-input v-model="searchText" placeholder="输入关键字" style="width:300px"></el-input>
                <el-button type="primary" size="medium" @click="search" style="margin-left:20px">检索</el-button>
                <!-- <el-button type="primary" size="medium" @click="toVipCompanyEditor('')">添加</el-button> -->
            </el-col>
        </div>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%">
            <!-- <el-table-column
                label="logo"
                width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.user_info">
                        <img :src="scope.row.user_info.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column
                prop="name"
                label="单位名称"
                show-overflow-tooltip
                width="180">
                <template  slot-scope="scope">
                    
                    <div @click.stop="showConsultation(scope.row.id)" style="cursor:pointer;color:#409EFF">{{scope.row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="uniform_social_credit_code"
                label="统一社会信用代码"
                show-overflow-tooltip
                width="150"
                >
            </el-table-column>
            <el-table-column
                prop="phone"
                label="单位地址"
                width="180"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">
                        {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}{{scope.row.address}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="auth_employeeNum_num"
                label="认证用户数量"
                width="150"
                >
            </el-table-column>
            <el-table-column
                prop="name"
                label="营业执照"
                width="100">
                <template slot-scope="scope">
                    <div>
                        <el-button type="primary" size="mini" @click.stop="showLicense(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                prop="created_at"
                label="首次提交时间"
                show-overflow-tooltip
                width="150"
                >
            </el-table-column>
            <el-table-column label="编辑" width='100'>
                <template slot-scope="scope">
                    <el-button size="mini" type='primary' @click="toAuthCompanyEditor(scope.row.id)" >编辑</el-button>             
                </template>
            </el-table-column>
             <el-table-column label="操作" width='150'>
                <template slot-scope="scope">
                    <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作">
                    <el-option value='员工表'><el-button  type='text' style="width:100%" @click="toStaff(scope.row.id,true)">员工表</el-button></el-option>
                    <el-option value='设置管理员'><el-button size="medium" style="width:100%" type='text' @click="setAdmin(scope.row.id)" >设置管理员</el-button></el-option>
                    <!-- <el-option value='删除'><el-button type='text' @click="deletCompany(scope.row.id,true)">删除</el-button></el-option> -->
                    
                    
                    </el-select>
                </template>
            </el-table-column>
            
        </el-table>
        <el-col :span="24" class="footer-bar">
            <div class="page-code">
                <el-pagination
                    background
                    :page-size="16"
                    layout="prev, pager, next"
                    :total="totalPage"
                    @current-change="pageChange"
                        >
                </el-pagination>
            </div>
        </el-col>
    <!-- 列表end -->


    <!-- 单位详情 -->
		<el-dialog title="单位详情" :visible.sync="consultationVisible" @close="initData">
            
            <el-form :label-position="'left'" label-width="150px" >
                <el-form-item label="logo" >
                    <div> <img :src="cousultationDetail.logo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
                </el-form-item>
                <el-form-item label="单位名称" >
                    <div>{{cousultationDetail.name}}</div>
                </el-form-item>
                <el-form-item label="联系方式" >
                    <div>{{cousultationDetail.contact_number}}</div>
                </el-form-item>
                <el-form-item label="单位地址" >
                    <div>{{cousultationDetail.province}}{{cousultationDetail.city}}{{cousultationDetail.area}}{{cousultationDetail.address}}</div>
                </el-form-item>
                
                <el-form-item label="业务范围" >
                    <div class="tag-wrapper">
                        <span v-for="(item,index) of cousultationDetail.unit_business_label" :key="index">{{item}}</span>
                    </div>
                </el-form-item>
                <el-form-item label="单位简介" >
                    <div class="rich-text" v-html="cousultationDetail.introduction"></div>
                </el-form-item>
                <!-- <el-form-item label="法定代表人" >
                    <div>{{cousultationDetail.legal_person_name}}</div>
                </el-form-item> -->
                <el-form-item label="营业执照" >
                    <div>
                        <el-image 
                        style="width: 200px; height: 200px"
                        :fit="'contain'"
                        :src="cousultationDetail.license_img_url" 
                        :preview-src-list="[cousultationDetail.license_img_url]">
                    </el-image>
                    </div>
                </el-form-item>
                <el-form-item label="统一社会信用代码" >
                    <div>{{cousultationDetail.uniform_social_credit_code}}</div>
                </el-form-item>
                <el-form-item label="创建时间" >
                    <div>{{cousultationDetail.created_at}}</div>
                </el-form-item>
                <el-form-item label="链接" >
                    <el-button type="primary"
						v-clipboard:copy="cousultationDetail.unit_url"
						v-clipboard:success="onCopy"
						size="mini"
						v-clipboard:error="onError">复制链接</el-button>
                </el-form-item>
                
                
            </el-form>
		</el-dialog>
        <!-- 单位详情end -->

        <!-- 营业执照 -->
        <el-dialog title="营业执照" :visible.sync="licenseVisible" @close="initData">
            <el-form :label-position="'left'" label-width="150px" >
                    <div align="center"> <img :src="licneseUrl" alt="" style="max-width:400px;margin:0 auto"></div>
            </el-form>
        </el-dialog>  
        <!-- 营业执照end -->
    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            consultationVisible:false,//查看单位详情状态
            goodAtVisible:false,
            licenseVisible:false,

            searchText:'',
            userAuthId:'',//选中的用户id

            cousultationDetail:{},
            tableData: [{}],
            licneseUrl:'',
            page:1,
            totalPage:0    
        }
    },
    watch: {

    },
    methods: {
        onCopy(e){
			this.$message({
				type:'success',
				message:'复制成功'
			})
		},
		onError(erro){
			this.$message({
				type:'error',
				message:'复制失败'
			})
		},
        search(){
            this.page=1;
            this.getUnitList()
        },
        async getUnitList(){
            //获取会员列表
            let params={
                page:this.page,
                limit:16,
                keyword:this.searchText,
                is_member_unit:0
            }
            let res=await this.$api.getUnitList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getUnitList();
        },
        async deletCompany(id){
            //删除
            let judge=null;
            let tit='删除该会员单位?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
        },
        showLicense(scope){
            //显示营业执照
            this.licneseUrl=scope.license_img_url
            this.licenseVisible=true;
            
        },
        async showConsultation(id){
            //显示详情
            let res=await this.$api.getUnitDetail({id:id});
            if(res.data.level=='success'){
                this.cousultationDetail=res.data.data;
                this.consultationVisible=true
            }else{
                this.$message.error(res.data.message)
            }
            
            
        },
        toAuthCompanyEditor(id){
            //编辑
            this.$router.push({name:'AuthCompany_editor',query:{id:id}})
        },
        toStaff(id){
            //员工列表
            this.$router.push({name:'AuthCompany_staff',query:{id:id}})
        },
        setAdmin(id){
            //设置管理员
            this.$router.push({name:'AuthCompany_admin',query:{id:id}})
        },
        initData(){

        }

    },
    mounted() {
        this.getUnitList()
    },
}
</script>
<style lang="scss" scoped>
    .screen{
          margin-top: -10px !important;
      }
      .action-bar-wrapper{
          position: sticky;
            z-index: 1;
            top:-10px;
      }
    .action-bar{
			background-color: #f2f2f2;
            
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}

        .tag-wrapper{
            span{
                padding:20px
            }
        }
</style>